<template>
  <div class="user-container">

    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="230">
      </el-table-column>
      <el-table-column prop="address" label="账号" width="300">
      </el-table-column>
      <el-table-column prop="address" label="账号状态" width="150">
      </el-table-column>


      <el-table-column prop="phone" label="手机号">
      </el-table-column>

      <el-table-column prop="phone" label="操作" width="300">
        <!-- <el-button type="warning" round>危险按钮</el-button> -->
        <el-button type="warning" round @click="editClick()">修改</el-button>
        <el-button type="warning" round @click="changeStatus()">启用</el-button>
        <el-button type="warning" round @click="delClick()">删除</el-button>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]" :page-size="10" layout="total, sizes, prev, pager, next" :total="20">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {getUserList} from '@/api/user'

export default {
  name: 'Dashboard',
  data() {
    return {
      currentPage: 1,
      tableData: [],
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      total:0
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods: {
    mounted () {
      this.init()
    },

    init(){
      getUserList(this.listQuery).then(res=>{
        console.log('111');
        console.log(res);
      })
    },

    changeStatus() {
      this.$confirm('确认停售, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '停售成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    editClick() {
      this.$router.push({ path: '/user/editUser' })
    },
    delClick() {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      console.log(`当前页: ${val}`);
    }
  }
}
</script>

<style lang="scss">
.user-container {
  .el-table .cell {
    // font-size: 20px;
    text-align: center;
  }

  &-container {
    margin: 30px;


  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }




}
</style>
